<template>
  <div class="a">
    <div>
      <h2>app组件</h2>
      <div @click="money++">money:{{ money }}</div>
      <div>car:{{ car }}</div>
    </div>

    <A1Com />
    <A2Com />
  </div>
</template>

<script setup>
import { ref, provide, readonly, inject } from "vue";
import A1Com from "./A1Com.vue";
import A2Com from "./A2Com.vue";

// 隔代传输数据:提供数据provide('注入名', 值)————注入数据inject("注入名",默认值)
// readonly自读
const money = ref(100);
provide("money", readonly(money));

// 父获取A1组件发来的数据
const car = ref("");
// 接收全局注入数据
const emitter = inject("emitter");
// on监听事件('注入名',值)
emitter.on("sendCar2", (data) => {
  console.log("App组件收到了A1的车:", data.value);
  car.value = data.value;
});
</script>

<style lang="scss" scoped>
.a {
  width: 1200px;
  height: 600px;
  border: 2px solid red;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>